<template>
  <div class="search">
<el-card class="search-view">
<template #header> 
  <h4 class="word">关键词搜索</h4>
  <!-- 更多 -->
  <el-dropdown>
    <span class="el-dropdown-link">
   <el-icon class="el-icon--right"><More/></el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
        <el-dropdown-item :icon="CirclePlusFilled">
          Action 2
        </el-dropdown-item>
        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>


 
</template>
<div class="search-wrap">

<div class="search-wrap-chart">
<div class="chart-title">搜索用户数</div>
<div class="chart-count">{{ numberFormat(lineData?.totalUser) }}</div>
    <v-chart class="line-charts" :option="getOption('userList','搜索用户数')" autoresize></v-chart>
</div>
<div class="search-wrap-chart">
  <div class="chart-title">搜索量</div>
  <div class="chart-count">{{ numberFormat(lineData.totalCount) }}</div>
    <v-chart class="line-charts" :option="getOption('countList','搜索用户数')" autoresize></v-chart>
</div>


</div>



<!-- 表格 -->
<el-table stripe :data="tableData"   style="width: 100%">
  <el-table-column prop="pageNo" label="排名" width="100" align="center" />
  <el-table-column prop="word" label="关键字" />
  <el-table-column prop="count" label="搜索数量" />
  <el-table-column prop="user" label="搜索用户数" />
  <el-table-column prop="rate" label="搜索占比" />
</el-table>
  <!-- 分页器 -->
<el-pagination v-model:current-page="currentPage1" :page-size="pageSize" :small="small" :disabled="disabled"
  :background="background" layout=" prev, pager, next" :total="totalTableData.length" />

</el-card>
<el-card class="search-view"></el-card>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Search'
  }
</script>
<script lang="ts" setup>
import { ref, onMounted, watch,computed } from 'vue'
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import {
 
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
  More
} from '@element-plus/icons-vue'
import { useReportDataStore } from "@/stores/reportData"
import useFormat from "@/hooks/useFrmat"

const currentPage1 = ref(1)

const pageSize = ref(5)


const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const { numberFormat, moneyFormat } = useFormat()
const useReport = useReportDataStore()
//使用计算属性获取表格数据
const searchword = computed(() => {


  return useReport.reportInfo.searchWord
})
//想其中加入一些数据
const totalTableData = computed(() => {
  if(!searchword.value)return []
return  searchword.value?.map((item,index) => {
    return {
      ...item,
      pageNo: index + 1,
      rate: ((item.user/item.count)*100).toFixed(2)+'%'
    }
  })
})
//每页要截取一段的数据
const tableData = computed(() => {
return  totalTableData.value.slice((currentPage1.value-1)*pageSize.value,currentPage1.value*pageSize.value)
})
//折线图的数据
const lineData = computed(() => {
  //定义一个对象，用来管理所用到的数据
  const data = {
    wordList: [] as string[],//横轴的数据
    userList: [] as number[],//索索用户的数据
    countList: [] as number[],//搜索量
    totalUser: 0,//总的用户数
    totalCount:0,//总的搜索量
  }
  if (totalTableData.value && totalTableData.value.length > 0) {
    totalTableData.value.forEach(item => {
      data.wordList.push(item.word);
      data.userList.push(item.user)
      data.countList.push(item.count)
      data.totalUser += item.user;
      data.totalCount += item.count;
    })
   
  }
  return data
})
//定义用户渲染折线图的数据
const getOption = (listName:'userList'|'countList',name:string) => {
  return {
    color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
  
  
    grid: {
      left: 0,
      top: 0,
      bottom: 0,
      right: 0
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: lineData.value.wordList
      }
    ],
    yAxis: [
      {
        type: 'value',
        show:false,
      }
    ],
    series: [
      {
        name: 'Line 1',
        type: 'line',
        stack: 'Total',
        smooth: true,
        itemStyle: {
          opacity: 0
        },
        lineStyle: {
          color: '#5FBBFF'
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
         color: '#C7E7FF'
        },
        emphasis: {
          focus: 'series'
        },
        data: lineData.value[listName]
      },

    ]
  };
}

</script>

<style lang="scss" scoped>
.search {
  display: flex;

  .search-view {
    flex: 1;
    cursor: pointer;

    h4 {
      font-weight: 500;
    }

    &:first-child {
      margin-right: 10px;

      .search-wrap {
        display: flex;

        .search-wrap-chart {
          // display: inline-block;
          // width: 50%;
          flex: 1;

          &:first-child {
            margin-right: 4px;
          }

          &:last-child {
            margin-left: 4px;
          }

          .chart-title {
            font-size: 14px;
            color: #999;
          }

          .chart-count {
            font-size: 20px;
            margin: 4px 0;
            letter-spacing: 1px;
          }

          .line-charts {
            height: 50px;
          }
        }
      }
    }

    &:last-child {
      margin-left: 10px;

      .search-pie {
        .pie-chart {
          height: 400px;
        }
      }
    }

    :deep(.el-card__header) {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .word{
        font-size: 20px;
        color: #bbb;
      }
    }
  }
}
</style>